<!DOCTYPE html>
<html>
	<head>
		<title>CSS Test: flow-into on ordered lists that use a single CSS counter and ::before for list numbering</title>
		<link rel="author" title="Mihai Balan" href="mibalan@adobe.com">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#properties" />
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" />
		<meta name="flags" content="">
		<meta name="assert" content="The flow-into property can be applied to ordered lists. Multiple lists using a single counter displayed in generated content and extracted in a named flow should render in regions just as without regions.">
		<link rel="match" href="reference/extract-ordered-lists-in-regions-explicit-counters-001-ref.html">
		<style>
		ol {
			list-style-type: none;
			counter-reset: items 0;
		}
		ol>li {
			counter-increment: items;
		}
		li::before {
			content: counter(items) ". ";
			display: inline-block;
			width: 1.5em;
			margin-right: .3em;
			text-align: right;
		}

		ol.double>li {
			counter-increment: items 2;
		}
		ol.double>li::before {
			content: counter(items, upper-latin) ". ";
		}

		ol.down-ten {
			counter-reset: items 11;
		}
		ol.down-ten>li {
			counter-increment: items -1;
		}
		ol.down-ten>li::before {
			content: counter(items, upper-roman) ". ";
			width: 2em;
		}

		#list1 {
			flow-into: flow1;
		}
		#list21, #list22 {
			flow-into: flow2;
		}
		#list31 {
			flow-into: flow3;
		}

		.region {
			background-color: lightgray;
			margin: 1em;
			float: left;
			width: 18em;
			height: 15em;
		}
		#region1 {
			flow-from: flow1;
		}
		#region2 {
			flow-from: flow2;
		}
		#region3 {
			flow-from: flow3;
		}
		</style>
	</head>
	<body>
		<p>The test passes if there are three gray rectangles as follows:<br>
			1. the first one contains a numbered, 4 items list<br>
			2. the second contains two numbered, 3 items lists &ndash; each list uses letters for numbering, starting with 'B.' and skipping every other letter (<em>e.g.</em> B, D, F)<br>
			3. the last rectangle contains a descending numbered list: it's numbered using roman numerals, starting at X (10), in decreasing order; after the second item there's an inner numbered list with 2 items, again descendingly numbered with roman numerals, starting at 10; finally, before the last item there's another inner numbered list with 2 items, labeled with letters, more precisely, the letters B and D</p>
		<ol id="list1">
			<li>First list, item 1</li>
			<li>First list, item 2</li>
			<li>First list, item 3</li>
			<li>First list, item 4</li>
		</ol>
		<ol id="list21" class="double">
			<li>List 2-1, item B</li>
			<li>List 2-1, item D</li>	
			<li>List 2-1, item F</li>
		</ol>
		<ol id="list22" class="double" start="4">
			<li>List 2-2, item B</li>
			<li>List 2-2, item D</li>
			<li>List 2-2, item F</li>
		</ol>
		<ol id="list31" class="down-ten">
			<li>Outer list, item X</li>
			<li>Outer list, item IX
				<ol class="down-ten">
					<li>Inner list 1, item X</li>
					<li>Inner list 1, item IX</li>
				</ol>
			</li>
			<li>Outer list, item VIII</li>
			<li>Outer list, item VII</li>
			<li>Outer list, item VI
				<ol class="double">
					<li>Inner list 2, item B</li>
					<li>Inner list 2, item D</li>
				</ol>
			</li>
			<li>Outer list, item V</li>
		</ol>
		<div class="region" id="region1"></div>
		<div class="region" id="region2"></div>
		<div class="region" id="region3"></div>
	</body>
</html>